<script setup>
import { HeaderType } from "@/utils/common.ts";
const props = defineProps({
  slotType: {
    type: String,
    default: HeaderType.text
  },
  title: {
    type: String,
    default: ''
  },
  btnMethod: {
    type: Function,
    default: () => {
      return () => {
      }
    }
  },
  methodParam: {
    type: Object,
    default: () => {
      return {}
    }
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {
        padding: '10px',
        height:'100%'
      }
    }
  }
});
</script>

<template>
  <div class="card">
    <el-card :body-style="bodyStyle">
      <template #header>
        <el-divider class="ver-divider" direction="vertical"></el-divider>
        <span v-if="slotType===HeaderType.text" class="card-title">{{ title }}</span>
        <el-button v-if="slotType===HeaderType.button" type="primary" link class="card-title" @click="btnMethod(methodParam)">
          <span class="card-title">{{ title }}</span>
        </el-button>
        <slot v-if="slotType===HeaderType.other" name="header"></slot>
      </template>
      <slot></slot>
    </el-card>
  </div>
</template>

<style scoped>
.card{
  border-radius: 10px;
  background-color: white;
  background-image: url("@/assets/dragon_bg.png");
  overflow: hidden;
}
.el-card{
  height: 100%;
}
.card-title {
  height: 24px;
  color: rgb(90, 94, 124);
  line-height: 24px;
  font-size: 24px;
}
</style>